function rotate (e) {
    e= e || window.event;
    var x1=e.pageX;
    var y1=e.pageY-$(document).scrollTop();
    var cards=document.getElementById("card");
    cards.style.transition='all 0s'
    var x2=cards.getBoundingClientRect().left;
    var y2=cards.getBoundingClientRect().top;
    var x=-1*(x1-x2-cards.offsetWidth/2)/14;
    var y=(y1-y2-cards.offsetHeight/2)/14;
    if (card.r>90 && card.r<270) {
        cards.style.transform="rotateX("+y+"deg) rotateY("+(180+x)+"deg)";
    }
    else {
        cards.style.transform="rotateX("+y+"deg) rotateY("+x+"deg)";
    }
    card.alpha=Math.max(Math.abs(x)/18,Math.abs(y)/18);
    card.draw();
}

function out () {
    var cards=document.getElementById("card");
    cards.style.transition='all 1s';
    card.alpha=0;
    if (card.r>90 && card.r<270) {
        cards.style.transform='rotateX(0) rotateY(180deg)'
    }
    else {
        cards.style.transform='rotateX(0) rotateY(0)'
    }
}

var temp_img=null;
function upload(obj)
{
    var file=obj.files[0];
    var reader=new FileReader();
    reader.readAsDataURL(file);                    
    reader.onload=function(e)
    {
        var newimg=this.result;       
        var img=document.getElementById("pic");
        img.src=newimg;
        temp_img=newimg;
        var w=img.naturalWidth;
        var h=img.naturalHeight;
        card.cut=[0,0,w,h];
        jcropApi.setImage(newimg);
        card.cut_t=true;
        card.flash=false;
        setTimeout(function () {
            card.draw();
        },100)
    };
}

function cl()
{
    return document.getElementById('upimg').click();
}

function dl() {
    var card0=document.getElementById("card");
    var card1=Canvas2Image.saveAsPNG(card0, true).getAttribute('src');    
    saveFile(card1, card.ifm.name+'.png');
}

var saveFile = function(data, filename){
    var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
    save_link.href = data;
    save_link.download = filename;
   
    var event = document.createEvent('MouseEvents');
    event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
    save_link.dispatchEvent(event);
}

var card=new Vue ({
    el:"#box",
    data:{
        ifm:{
            type:"monster",
            type2:"xg",
            type3:"tz",
            type4:null,
            name:"浮幽樱",
            property:"dark",
            stars:3,
            links:[false,false,false,false,false,false,false,false],
            img:null,
            race:5,
            value:null,
            attack:0,
            defend:1800,
            lb:null,
            lb_value:null,
        },
        ifm_cn:{
            name:"浮幽樱",
            value:`「浮幽樱」的效果1回合只能使用1次。①：对方场上的怪兽数量比自己场上的怪兽多的场合，把这张卡从手卡丢弃才能发动。选自己的额外卡组1张卡给双方确认。那之后，把对方的额外卡组确认，有选的卡的同名卡的场合，那些对方的同名卡全部除外。这个效果在对方回合也能发动。`,
            lb_value:null,
        },
        ifm_jp:{
            name:"浮幽さくら",
            value:`このカード名の効果は１ターンに１度しか使用できない。①：相手フィールドのモンスターの数が自分フィールドのモンスターより多い場合、このカードを手札から捨てて発動できる。自分のＥＸデッキのカード１枚を選んでお互いに確認する。その後、相手のＥＸデッキを確認し、選んだカードの同名カードがある場合、その相手の同名カードを全て除外する。この効果は相手ターンでも発動できる。`,
            lb_value:null,
        },
        props: [
            {
                text:"光",
                value:"light"
            },
            {
                text:"暗",
                value:"dark"
            },
            {
                text:"风",
                value:"wind"
            },
            {
                text:"地",
                value:"ground"
            },
            {
                text:"水",
                value:"water"
            },
            {
                text:"炎",
                value:"fire"
            },
            {
                text:"神",
                value:"god"
            }
        ],
        types: [
            {
                text:"怪兽",
                value:"monster"
            },
            {
                text:"魔法",
                value:"magic"
            },
            {
                text:"陷阱",
                value:"tragic"
            }
        ],
        types2: [
            {
                text:"通常",
                jp:"通常",
                value:"tc"
            },
            {
                text:"效果",
                jp:"効果",
                value:"xg"
            },
            {
                text:"仪式",
                jp:"儀式",
                value:"ys"
            },
            {
                text:"融合",
                jp:"融合",
                value:"rh"
            },
            {
                text:"同调",
                jp:"シンクロ",
                value:"tt"
            },
            {
                text:"超量",
                jp:"エクシーズ",
                value:"cl"
            },
            {
                text:"暗黑同调",
                jp:"ダーク・シンクロ",
                value:"dt"
            },
            {
                text:"连接",
                jp:"リンク",
                value:"lj"
            },
            {
                text:"衍生物",
                jp:"トークン",
                value:"to"
            }
        ],
        types2_list:['tc','xg','ys','rh','tt','cl','dt','lj',"to"],
        types21: [
            {
                text:"通常",
                jp:"通常",
                value:"tc"
            },
            {
                text:"调整",
                jp:"チューナー",
                value:"tz"
            },
            {
                text:"灵魂",
                jp:"スピリット",
                value:"lh"
            },
            {
                text:"二重",
                jp:"デュアル",
                value:"rc"
            },
            {
                text:"同盟",
                jp:"ユニオン",
                value:"tm"
            },
            {
                text:"反转",
                jp:"リバース",
                value:"fz"
            },
            {
                text:"卡通",
                jp:"トゥーン",
                value:"kt"
            },
            {
                text:"特殊召唤",
                jp:"特殊召喚",
                value:"sm"
            }
        ],
        types21_list:['tc','tz','lh','rc','tm','fz','kt',"sm"],
        types3: [
            {
                text:"通常",
                value:"tc"
            },
            {
                text:"永续",
                value:"yx"
            },
            {
                text:"速攻",
                value:"sg"
            },
            {
                text:"装备",
                value:"zb"
            },
            {
                text:"仪式",
                value:"ys"
            },
            {
                text:"场地",
                value:"cd"
            }
        ],
        types4: [
            {
                text:"通常",
                value:"tc"
            },
            {
                text:"永续",
                value:"yx"
            },
            {
                text:"反击",
                value:"fj"
            }
        ],
        new_attack:0,
        new_defend:1800,
        holo:true,
        copyright:true,
        key:false,
        card_bag:false,
        card_bag_num:"",
        r:0,
        password:"",
        cut:[0,0,526,526],
        cut_t:false,
        ls:false,
        diy_race:false,
        new_race:null,
        alpha:0,
        flash:true,
        lang:'日文',
        rarity:'SR',
        race_cn:["龙族","战士族","恶魔族","魔法师族","天使族","不死族","岩石族","植物族","昆虫族","水族","炎族","雷族","鱼族","海龙族","幻龙族","恐龙族","爬虫族","机械族","兽族","鸟兽族","兽战士族","念动力族","电子界族","幻神兽族","创造神族"],
        race_jp:["ドラゴン族","戦士族","悪魔族","魔法使い族","天使族","アンデット族","岩石族","植物族","昆虫族","水族","炎族","雷族","魚族","海竜族","幻竜族","恐竜族","爬虫類族","機械族","獣族","鳥獣族","獣戦士族","サイキック族","サイバース族","幻神獣族","創造神族"],
    },
    watch:{
        ifm:{
            handler () {
                if (this.ifm.stars>12) {
                    this.ifm.stars=12;
                }
                else if (this.ifm.stars<1) {
                    this.ifm.stars=null;
                };
                if (this.ifm.race=="999") {
                    this.diy_race=true;
                };
                if (this.ifm.type3=="lb") {
                    this.types2=[
                        {
                            text:"通常",
                            jp:"通常",
                            value:"tc"
                        },
                        {
                            text:"效果",
                            jp:"効果",
                            value:"xg"
                        },
                        {
                            text:"仪式",
                            jp:"儀式",
                            value:"ys"
                        },
                        {
                            text:"融合",
                            jp:"融合",
                            value:"rh"
                        },
                        {
                            text:"同调",
                            jp:"シンクロ",
                            value:"tt"
                        },
                        {
                            text:"超量",
                            jp:"エクシーズ",
                            value:"cl"
                        },
                        {
                            text:"暗黑同调",
                            jp:"ダーク・シンクロ",
                            value:"dt"
                        },
                        {
                            text:"衍生物",
                            jp:"トークン",
                            value:"to"
                        }
                    ]
                }
                else {
                    this.types2=[
                        {
                            text:"通常",
                            jp:"通常",
                            value:"tc"
                        },
                        {
                            text:"效果",
                            jp:"効果",
                            value:"xg"
                        },
                        {
                            text:"仪式",
                            jp:"儀式",
                            value:"ys"
                        },
                        {
                            text:"融合",
                            jp:"融合",
                            value:"rh"
                        },
                        {
                            text:"同调",
                            jp:"シンクロ",
                            value:"tt"
                        },
                        {
                            text:"超量",
                            jp:"エクシーズ",
                            value:"cl"
                        },
                        {
                            text:"暗黑同调",
                            jp:"ダーク・シンクロ",
                            value:"dt"
                        },
                        {
                            text:"连接",
                            jp:"リンク",
                            value:"lj"
                        },
                        {
                            text:"衍生物",
                            jp:"トークン",
                            value:"to"
                        }
                    ]
                };
                setTimeout(function () {
                card.draw();
                },100)
            },
            deep:true
        },
        new_attack:function () {
            var new_attack=this.new_attack;
            if (parseInt(new_attack)) {
                var old_attack=this.ifm.attack;
                var d=(new_attack-old_attack)/100;
                var i=0;
                var change=function (i) {
                    i++;
                    card.ifm.attack=parseInt(old_attack+i*d);
                    setTimeout(function () {
                        if (i<100) {
                            change(i)
                        }
                    },2)
                };
                change(i);
            }
            else {
                card.ifm.attack=new_attack;
            }
        },
        new_defend:function () {
            var new_defend=this.new_defend;
            if (parseInt(new_defend)) {
                var old_defend=this.ifm.defend;
                var d=(new_defend-old_defend)/100;
                var i=0;
                var change=function (i) {
                    i++;
                    card.ifm.defend=parseInt(old_defend+i*d);
                    setTimeout(function () {
                        if (i<100) {
                            change(i)
                        }
                    },2)
                };
                change(i);
            }
            else {
                card.ifm.defend=new_defend;
            }
        },
        holo: function () {
            this.draw();
        },
        copyright: function () {
            this.draw();
        },
        password: function () {
            this.draw();
        },
        r: function () {
            this.card_rotate();
        }
    },
    computed:{
        property_src: function () {
            if (this.ifm.type=="monster") {
                return "img/property/"+this.ifm.property+".png";
            }
            else if (this.ifm.type=="magic") {
                return "img/property/magic.png";
            }
            else {
                return "img/property/tragic.png";
            }
        },
        card_type: function () {
            if (this.ifm.type=="monster") {
                switch (this.ifm.type2) {
                    case "xg" : return "img/emonster.jpg";

                    case "tc" : return "img/nmonster.jpg";

                    case "rh" : return "img/rmonster.jpg";

                    case "ys" : return "img/ymonster.jpg";

                    case "cl" : return "img/cmonster.jpg";

                    case "tt" : return "img/tmonster.jpg";

                    case "dt" : return "img/dtmonster.jpg";

                    case "lj" : return "img/link.jpg";

                    case "to" : return "img/token.jpg";
                }
            }
            else if (this.ifm.type=="magic") {
                return "img/magic.jpg";
            }
            else if (this.ifm.type=="tragic") {
                return "img/tragic.jpg";
            };
        },
        race_txt:function () {
            if (this.ifm.race=="999") {
                var race="族";
            }
            else {
                if (this.lang=='日文') {
                    var race=this.race_jp[this.ifm.race];
                }
                else {
                    var race=this.race_cn[this.ifm.race];
                }
            }
            var txt="【"+race;
            if (this.ifm.type2!="tc" && this.ifm.type2!="xg") {
                if (this.lang=="日文") {
                    var type2=this.types2[this.types2_list.indexOf(this.ifm.type2)].jp;
                }
                else {
                    var type2=this.types2[this.types2_list.indexOf(this.ifm.type2)].text;
                }
                txt+="/"+type2;
            }
            if (this.ifm.type3!="tc" && this.ifm.type3!=null && this.ifm.type3!="") {
                if (this.lang=="日文") {                    
                    if (this.ifm.type3=='lb') {
                        var type3="ペンデュラム";
                    }
                    else {
                        var type3=this.types21[this.types21_list.indexOf(this.ifm.type3)].jp;
                    }
                }
                else {                 
                    if (this.ifm.type3=='lb') {
                        var type3="灵摆";
                    }
                    else {
                        var type3=this.types21[this.types21_list.indexOf(this.ifm.type3)].text;
                    }
                }
                txt+="/"+type3;
            }
            if (this.ifm.type4!="tc" && this.ifm.type4!=null && this.ifm.type4!="" && this.ifm.type4!=this.ifm.type3) {
                if (this.lang=="日文") {
                    var type4=this.types21[this.types21_list.indexOf(this.ifm.type4)].jp;
                }
                else {
                    var type4=this.types21[this.types21_list.indexOf(this.ifm.type4)].text;
                }
                txt+="/"+type4;
            }
            if (this.ifm.type2!="tc" && this.ifm.type3!="tc" && this.ifm.type4!="tc") {
                if (this.lang=="日文") {
                    txt+="/効果】";
                }
                else {
                    txt+="/效果】";
                }
            }
            else {
                txt+="】";
            }   
            return txt;
        },
        type2_src: function () {
            if (this.ifm.type!="monster") {
                if (this.ifm.type2!="tc" && this.ifm.type2!="tc") {
                    return "img/type/"+this.ifm.type2+".png";
                }
            }
        },
        rotate: function () {
            return "rotateY("+this.r+"deg)";
        }
    },
    methods:{
        draw:function () {
            if (this.lang=="中文") {
                var lang="txt";
                this.ifm.name=this.ifm_cn.name;
                this.ifm.value=this.ifm_cn.value;
                this.ifm.lb_value=this.ifm_cn.lb_value;
            }
            else if (this.lang=="日文") {
                var lang="jp";
                this.ifm.name=this.ifm_jp.name;
                this.ifm.value=this.ifm_jp.value;
                this.ifm.lb_value=this.ifm_jp.lb_value;
            }
            else {
                var lang="en";
            }
            var ctx=document.getElementById("card");
            var c=ctx.getContext("2d");
            ctx.width=ctx.width;
            ctx.height=ctx.height;
            var bg=document.getElementById("bg");
            var pic=document.getElementById("pic");            
            var flash=document.getElementById("flash");
            c.drawImage(bg,0,0,694,1013);

            var pics1=[84,186,526,526];
            var pics2=[45,178,604,574];

            if (this.ifm.type3=="lb") {
                var pics=pics2;
            }
            else {
                var pics=pics1;
            }

            if (this.ls) {
                c.drawImage(pic,pics[0],pics[1],pics[2],pics[3]);
                c.globalAlpha=this.alpha;
                if (this.flash && this.rarity!="N")  {         
                    c.drawImage(flash,pics[0],pics[1],pics[2],pics[3]);
                }
                c.globalAlpha=1;               
            }
            else {
                var w = Math.max(1, Math.floor(this.cut[2]));
                var h = Math.max(1, Math.floor(this.cut[3]));
                c.drawImage(pic,this.cut[0],this.cut[1],w,h,pics[0],pics[1],pics[2],pics[3]);
                c.globalAlpha=this.alpha; 
                if (this.flash && this.rarity!="N")  {                  
                    c.drawImage(flash,this.cut[0],this.cut[1],w,h,pics[0],pics[1],pics[2],pics[3]);
                }
                c.globalAlpha=1;               
            }

            //灵摆
            if (this.ifm.type3=="lb") {
                var lb=document.getElementById("lb");
                c.drawImage(lb,0,0); 
                c.fillStyle="rgba(0,0,0,0.9)";
                var lb_num=parseInt(this.ifm.lb) || 0;
                if (lb_num>9) {    
                    c.font="42px number";
                    c.fillText(lb_num,48,724);
                    c.fillText(lb_num,602,724);
                }
                else {                        
                    c.font="45px number";
                    c.fillText(lb_num,58,724);
                    c.fillText(lb_num,612,724);
                }

                c.fillStyle="rgba(0,0,0,0.72)";
                var value=this.ifm.lb_value;
                if (value=="" || value==null) {
                    var word=[];
                }
                else {
                    var word=value.split("");
                }
                var p=new Array();
                var t=0;
                var pi="";
                if (word.length<200) {
                    var max=25.5,d=17;
                }
                else if (word.length>200 && word.length<300) {
                    var max=28.5,d=14;
                }
                else {
                    var max=33.5,d=12;
                }
                for (i in word) {             
                    if (t<max) {
                        if (word[i]=="\n") {
                            t=0;
                            p.push(pi);
                            pi="";
                        }
                        else {
                            pi+=word[i];
                            var re = /[a-z]/i;
                            if (word[i]=="（" || word[i]=="）" || word[i]=="(" || word[i]==")" || re.test(word[i]) || word[i]=="," || word[i]=="." || word[i]=="。" || word[i]=="[" || word[i]=="]" || word[i]=="-" || word[i]=="+" || word[i]=="【" || word[i]=="】" || word[i]=="·" || parseInt(word[i]) || word[i]=="「" || word[i]=="」" || word[i]=="：" || word[i]==":" || word[i]=="、") {
                                t+=0.5;
                                if (t>=max) {
                                    p.push(pi);
                                    pi="";
                                    t=0
                                }
                            }
                            else {
                                t++;
                                if (t>=max) {
                                    p.push(pi);
                                    pi="";
                                    t=0
                                }
                            }
                        }
                    }
                    else {
                        p.push(pi);
                        pi="";
                        t=0
                    }
                }
                if (pi!="") {
                    p.push(pi);
                }
                if (word.length<200 && p.length<6) {
                    var max=26.5,d=18,left=106,top=658;
                    c.font="bold 18px "+lang;
                }
                else if (word.length<200 && p.length>=6 && p.length<8) {
                    var max=29.5,d=15,left=106,top=656;
                    c.font="bold 16px "+lang; 
                }
                else if (word.length>=200 && word.length<300 && p.length<8) {
                    var max=29.5,d=15,left=106,top=656;
                    c.font="bold 16px "+lang; 
                }
                else if (word.length>=200 && word.length<300 && p.length>=8) {
                    var max=34.5,d=13,left=106,top=653;
                    c.font="bold 14px "+lang; 
                }
                else {
                    var max=34.5,d=13,left=106,top=653;
                    c.font="bold 14px "+lang; 
                }

                p=[];
                pi="";
                t=0;
                for (i in word) {             
                    if (t<max) {
                        if (word[i]=="\n") {
                            t=0;
                            p.push(pi);
                            pi="";
                        }
                        else {
                            pi+=word[i];
                            var re = /[a-z]/i;
                            if (word[i]=="（" || word[i]=="）" || word[i]=="(" || word[i]==")" || re.test(word[i]) || word[i]=="，" || word[i]=="," || word[i]=="." || word[i]=="。" || word[i]=="[" || word[i]=="]" || word[i]=="-" || word[i]=="+" || word[i]=="【" || word[i]=="】" || word[i]=="·" || parseInt(word[i]) || word[i]=="「" || word[i]=="」" || word[i]=="：" || word[i]==":" || word[i]=="、") {
                                t+=0.5;
                            }
                            else {
                                t++;
                            }
                        }
                    }
                    else {
                        p.push(pi);
                        pi="";
                        t=0
                    }
                }

                if (pi!="") {
                    p.push(pi);
                }
                for (j in p) {
                    c.fillText(p[j],left,top+j*d,480);
                }
            }

            if (this.ifm.type=="monster") {
                c.fillStyle="rgba(0,0,0,0.8)";
                var value=this.ifm.value;
                var word=value.split("");
                var p=new Array();
                var t=0;
                var pi="";
                if (word.length<120) {
                    var max=25.5,d=20,left=57,top=805;
                    c.font="bold 23px "+lang;
                }
                else if (word.length>=120 && word.length<145) {
                    var max=34.5,d=17,left=57,top=803;
                    c.font="bold 21px "+lang;
                }
                else {
                    var max=37.5,d=14,left=50,top=800;
                    c.font="bold 18px "+lang;
                }
                for (i in word) {
                    if (t<max) {
                        if (word[i]=="\n") {
                            t=0;
                            p.push(pi);
                            pi="";
                        }
                        else {
                            pi+=word[i];
                            var re = /[a-z]/i;
                            if (word[i]=="（" || word[i]=="）" || word[i]=="(" || word[i]==")" || re.test(word[i]) || word[i]=="，" || word[i]=="," || word[i]=="." || word[i]=="。" || word[i]=="[" || word[i]=="]" || word[i]=="-" || word[i]=="+" || word[i]=="【" || word[i]=="】" || word[i]=="·" || parseInt(word[i]) || word[i]=="「" || word[i]=="」" || word[i]=="：" || word[i]==":" || word[i]=="、") {
                                t+=0.5;
                            }
                            else {
                                t++;
                            }
                        }
                    }
                    else {
                        p.push(pi);
                        pi="";
                        t=0
                    }
                }
                if (pi!="") {
                    p.push(pi);
                }
                if (word.length<120 && p.length<5) {
                    var max=25.5,d=27,left=50,top=808;
                    c.font="bold 23px "+lang; 
                }
                else if (word.length<120 && p.length>=5) {
                    var max=27.5,d=25,left=49,top=806;
                    c.font="bold 21px "+lang; 
                }
                else if (word.length>=120 && word.length<145 && p.length<6) {
                    var max=27.5,d=25,left=49,top=806;
                    c.font="bold 21px "+lang; 
                }
                else if (word.length>=120 && word.length<145 && p.length>=6) {
                    var max=34.5,d=23,left=49,top=803;
                    c.font="bold 19px "+lang; 
                }
                else if (word.length>=145 && word.length<200 && p.length<9) {
                    var max=34.5,d=23,left=49,top=803;
                    c.font="bold 19px "+lang; 
                }
                else if (word.length>=145 && word.length<200 && p.length>=9) {
                    var max=37.5,d=21,left=49,top=803;
                    c.font="bold 17px "+lang; 
                }
                else {
                    var max=37.5,d=18,left=49,top=803;
                    c.font="bold 16px "+lang; 
                }

                p=[];
                pi="";
                t=0;
                for (i in word) {             
                    if (t<max) {
                        if (word[i]=="\n") {
                            t=0;
                            p.push(pi);
                            pi="";
                        }
                        else {
                            pi+=word[i];
                            var re = /[a-z]/i;
                            if (word[i]=="（" || word[i]=="）" || word[i]=="(" || word[i]==")" || re.test(word[i]) || word[i]=="「" || word[i]=="」" || word[i]=="，" || word[i]=="," || word[i]=="." || word[i]=="。" || word[i]=="[" || word[i]=="]" || word[i]=="-" || word[i]=="+" || word[i]=="【" || word[i]=="】" || word[i]=="·" || parseInt(word[i]) || word[i]=="：" || word[i]==":" || word[i]=="、") {
                                t+=0.5;
                                if (t>=max) {
                                    p.push(pi);
                                    pi="";
                                    t=0
                                }
                            }
                            else {
                                t++;
                                if (t>=max) {
                                    p.push(pi);
                                    pi="";
                                    t=0
                                }
                            }
                        }
                    }
                    else {
                        p.push(pi);
                        pi="";
                        t=0
                    }
                }

                if (pi!="") {
                    p.push(pi);
                }
                if (this.lang=="中文") {
                    left+=3;
                }
                for (j in p) {
                    c.fillText(p[j],left,top+j*d,592);
                }
                c.fillStyle="#000";
                c.font="28px number";
                if (this.ifm.attack<10 || this.ifm.attack=="?" || this.ifm.attack=="？") {
                    if (this.ifm.attack=="？") {
                        this.ifm.attack="?";
                    }
                    c.fillText(this.ifm.attack,482,945);
                }
                else if (this.ifm.attack>=10 && this.ifm.attack<100) {
                    c.fillText(this.ifm.attack,468,945);
                }
                else if (this.ifm.attack>=100 && this.ifm.attack<1000) {
                    c.fillText(this.ifm.attack,453,945);
                }
                else {
                    c.fillText(this.ifm.attack,438,945);
                }
                if (this.ifm.type2!="lj") {
                    if (this.ifm.defend<10 || this.ifm.defend=="?") {
                        c.fillText(this.ifm.defend,617,945);
                    }
                    else if (this.ifm.defend>=10 && this.ifm.defend<100) {
                        c.fillText(this.ifm.defend,605,945);
                    }
                    else if (this.ifm.defend>=100 && this.ifm.defend<1000) {
                        c.fillText(this.ifm.defend,590,945);
                    }
                    else {
                        c.fillText(this.ifm.defend,575,945);
                    }
                };
                if (this.lang=="中文") {
                    c.font="bold 25px "+lang;
                    var left_=36;
                }
                else {
                    c.font="bold 24px "+lang;
                    var left_=46;
                }
                c.fillStyle="rgba(0,0,0,0.82)";
                c.fillText(this.race_txt,left_,782);
            }
            else {
                c.fillStyle="rgba(0,0,0,0.8)";
                var value=this.ifm.value;
                var word=value.split("");
                var p=new Array();
                var t=0;
                var pi="";
                if (word.length<250) {
                    var max=25.5,d=20,left=57,top=785;
                    c.font="bold 22px "+lang; 
                }
                else if (word.length>250 && word.length<300) {
                    var max=31.5,d=17,left=57,top=783;
                    c.font="bold 20px "+lang; 
                }
                else {
                    var max=36.5,d=14,left=50,top=780;
                    c.font="bold 18px "+lang; 
                }
                for (i in word) {             
                    if (t<max) {
                        if (word[i]=="\n") {
                            t=0;
                            p.push(pi);
                            pi="";
                        }
                        else {
                            pi+=word[i];
                            var re = /[a-z]/i;
                            if (word[i]=="（" || word[i]=="）" || word[i]=="(" || word[i]==")" || re.test(word[i]) || word[i]=="「" || word[i]=="」" || word[i]=="，" || word[i]=="," || word[i]=="." || word[i]=="。" || word[i]=="[" || word[i]=="]" || word[i]=="-" || word[i]=="+" || word[i]=="【" || word[i]=="】" || word[i]=="·" || parseInt(word[i]) || word[i]=="：" || word[i]==":" || word[i]=="、") {
                                t+=0.5;
                                if (t>=max) {
                                    p.push(pi);
                                    pi="";
                                    t=0
                                }
                            }
                            else {
                                t++;
                                if (t>=max) {
                                    p.push(pi);
                                    pi="";
                                    t=0
                                }
                            }
                        }
                    }
                    else {
                        p.push(pi);
                        pi="";
                        t=0
                    }
                }

                if (pi!="") {
                    p.push(pi);
                }
                if (word.length<250 && p.length<7) {
                    var max=27.5,d=26,left=50,top=785;
                    c.font="bold 21px "+lang; 
                }
                else if (word.length<250 && p.length>=7) {
                    var max=31.5,d=22,left=49,top=783;
                    c.font="bold 20px "+lang; 
                }
                else if (word.length>=250 && word.length<300 && p.length<9) {
                    var max=31.5,d=22,left=49,top=783;
                    c.font="bold 20px "+lang; 
                }
                else if (word.length>=250 && word.length<300 && p.length>=9) {
                    var max=36.5,d=19,left=49,top=780;
                    c.font="bold 18px "+lang; 
                }
                else {
                    var max=36.5,d=19,left=49,top=780;
                    c.font="bold 18px "+lang; 
                }

                p=[];
                pi="";
                t=0;
                for (i in word) {             
                    if (t<max) {
                        if (word[i]=="\n") {
                            t=0;
                            p.push(pi);
                            pi="";
                        }
                        else {
                            pi+=word[i];
                            var re = /[a-z]/i;
                            if (word[i]=="（" || word[i]=="）" || word[i]=="(" || word[i]==")" || re.test(word[i]) || word[i]=="「" || word[i]=="」" || word[i]=="，" || word[i]=="," || word[i]=="." || word[i]=="。" || word[i]=="[" || word[i]=="]" || word[i]=="-" || word[i]=="+" || word[i]=="【" || word[i]=="】" || word[i]=="·" || parseInt(word[i]) || word[i]=="：" || word[i]==":" || word[i]=="、") {
                                t+=0.5;
                                if (t>=max) {
                                    p.push(pi);
                                    pi="";
                                    t=0
                                }
                            }
                            else {
                                t++;
                                if (t>=max) {
                                    p.push(pi);
                                    pi="";
                                    t=0
                                }
                            }
                        }
                    }
                    else {
                        p.push(pi);
                        pi="";
                        t=0
                    }
                }

                if (pi!="") {
                    p.push(pi);
                }
                if (this.lang=="中文") {
                    left+=3;
                }
                for (j in p) {
                    c.fillText(p[j],left,top+j*d,592);
                }
                c.fillStyle="#000";
                c.font="40px "+lang;
                if (this.ifm.type=="magic") { 
                    if (this.ifm.type2=="tc") {
                        if (this.lang=="中文") {
                            c.fillText("【魔法卡】",455,155);
                        }
                        else {
                            c.fillText("【魔法カード】",388,158);
                        }
                    }
                    else {
                        if (this.lang=="中文") {
                            c.fillText("【魔法卡\r\r】",417,155);
                        }
                        else {
                            c.fillText("【魔法カード\r\r】",368,158);
                        }
                        var type2=document.getElementById("type2");
                        c.drawImage(type2,580,124);
                    }
                }
                else {
                   if (this.ifm.type2=="tc") {
                        if (this.lang=="中文") {
                            c.fillText("【陷阱卡】",455,155);
                        }
                        else {
                            c.fillText("【罠カード】",435,158);
                        }
                    }
                    else {
                        if (this.lang=="中文") {
                            c.fillText("【陷阱卡\r\r】",417,155);
                        }
                        else {
                            c.fillText("【罠カード\r\r】",409,158);
                        }
                        var type2=document.getElementById("type2");
                        c.drawImage(type2,580,124);
                    }
                }
            };
            if (this.ifm.type=="monster" && this.ifm.type2!="cl" && this.ifm.type2!="lj" && this.ifm.type2!="dt") {               
                c.fillStyle="#000";
            }
            else {
                c.fillStyle="#fff";
            }
            c.font="57px "+lang;
            if (lang=="en") {
                c.font="57px en_name";
            }
            if (lang=="jp")
            {
                if (this.rarity=="N" || this.rarity=="SR") {
                    c.fillText(this.ifm.name,50,100,530);
                }
                else if (this.rarity=="UR") {
                    c.fillStyle="#473e0e";
                    c.fillText(this.ifm.name,50,100,530);
                    c.globalAlpha=this.alpha;
                    c.fillStyle="#efea97";
                    c.fillText(this.ifm.name,50,100,530);
                    c.globalAlpha=0.8;
                    c.strokeStyle="#efea97";
                    c.lineWidth=1;
                    c.strokeText(this.ifm.name,50,100,530);
                    c.globalAlpha=1;
                }
                else if (this.rarity=="R") {
                    c.fillStyle="#404040";
                    c.fillText(this.ifm.name,50,100,530);
                    c.globalAlpha=this.alpha;
                    c.fillStyle="#f1f0d7";
                    c.fillText(this.ifm.name,50,100,530);
                    c.globalAlpha=0.8;
                    c.strokeStyle="#f1f0d7";
                    c.lineWidth=1;
                    c.strokeText(this.ifm.name,50,100,530);
                    c.globalAlpha=1;
                }
            }
            else {                    
                if (this.rarity=="N" || this.rarity=="SR") {
                    c.fillText(this.ifm.name,50,95,530);
                }
                else if (this.rarity=="UR") {
                    c.fillStyle="#473e0e";
                    c.fillText(this.ifm.name,50,95,530);
                    c.globalAlpha=this.alpha;
                    c.fillStyle="#efea97";
                    c.fillText(this.ifm.name,50,95,530);
                    c.globalAlpha=0.8;
                    c.strokeStyle="#efea97";
                    c.lineWidth=1;
                    c.strokeText(this.ifm.name,50,95,530);
                    c.globalAlpha=1;
                }
                else if (this.rarity=="R") {
                    c.fillStyle="#404040";
                    c.fillText(this.ifm.name,50,95,530);
                    c.globalAlpha=this.alpha;
                    c.fillStyle="#f1f0d7";
                    c.fillText(this.ifm.name,50,95,530);
                    c.globalAlpha=0.8;
                    c.strokeStyle="#f1f0d7";
                    c.lineWidth=1;
                    c.strokeText(this.ifm.name,50,95,530);
                    c.globalAlpha=1;
                }
            }
            if (this.ifm.type=="monster" && this.ifm.type2!="lj") {
                var stars=this.ifm.stars;
                if (this.ifm.type2!="cl") {
                    if (this.ifm.type2=="dt") {
                        var star=document.getElementById("darkstar");
                    } 
                    else {    
                        var star=document.getElementById("star");
                    }
                    for (var i=0;i<stars;i++) {
                        var left=578-i*46;
                        c.drawImage(star,left,121);
                    }
                }
                else {
                    var star=document.getElementById("level");
                    for (var i=0;i<stars;i++) {
                        var left=70+i*46;
                        c.drawImage(star,left,121);
                    }
                }
            };
            var prop=document.getElementById("prop");
            c.drawImage(prop,0,0,66,66,584,47,62,62);
            if (this.holo) {
                var holo=document.getElementById("holo");
                var holo2=document.getElementById("holo2");
                c.drawImage(holo,642,961)
                c.globalAlpha=this.alpha;
                c.drawImage(holo2,642,961,30,29);
                c.globalAlpha=1;
            };
            if (this.copyright) {              
                if (this.ifm.type2!="cl") {  
                    c.font="bold 17px copyright";               
                    c.fillStyle="rgba(0,0,0,0.7)";
                }
                else
                {
                    c.font="17px copyright";       
                    c.fillStyle="rgba(255,255,255,0.7)";
                }
                c.fillText("©高桥和希 スタジオ・ダイス/集英社",370,982,265);
            };
            if (this.key) {                
                c.font="20px number";         
                if (this.ifm.type2!="cl") {               
                    c.fillStyle="rgba(0,0,0,0.9)";
                }
                else
                {
                    c.fillStyle="rgba(255,255,255,0.9)";
                }
                c.fillText(this.password,37,982);
            };
            if (this.card_bag) {                
                c.font="20px number";   
                if (this.ifm.type2!="cl") {               
                    c.fillStyle="rgba(0,0,0,0.9)";
                }
                else
                {
                    c.fillStyle="rgba(255,255,255,0.9)";
                }
                if (this.ifm.type3=="lb") {
                    c.fillText(this.card_bag_num,60,944);
                }
                else if (this.ifm.type2=="lj") {
                    c.fillText(this.card_bag_num,462,744);
                }
                else {
                    c.fillText(this.card_bag_num,539,744);
                }
            };
            if (this.ifm.type2=="lj") {
                var l=0;
                for (var i=0;i<8;i++) {
                    if (this.ifm.links[i]) {
                        l++;
                    }
                }     
                c.font="bolder 26px link";
                c.fillStyle="rgba(0,0,0,0.9)";
                c.fillText(l,616,946);
                var arrow=document.getElementById("arrow");
                var arrow1=document.getElementById("arrow1");
                var arrow2=document.getElementById("arrow2");
                var arrow12=document.getElementById("arrow12");
                if (!this.ifm.links[6]) {
                    c.drawImage(arrow,273,708);
                }
                else {
                    c.drawImage(arrow2,273,708);
                }
                if (!this.ifm.links[5]) {
                    c.drawImage(arrow1,45,662);
                }
                else {
                    c.drawImage(arrow12,45,662);
                }
                c.translate(562,747);
                c.rotate(-90*Math.PI/180);
                if (!this.ifm.links[7]) {
                    c.drawImage(arrow1,0,0);
                }
                else {
                    c.drawImage(arrow12,0,0);  
                }
                c.translate(512,85);
                c.rotate(-90*Math.PI/180);
                if (!this.ifm.links[2]) {
                    c.drawImage(arrow1,0,0);
                }
                else {
                    c.drawImage(arrow12,0,0);  
                }
                c.translate(512,85);
                c.rotate(-90*Math.PI/180);
                if (!this.ifm.links[0]) {
                    c.drawImage(arrow1,0,0);
                }
                else {
                    c.drawImage(arrow12,0,0);  
                }
                c.translate(245,50);
                c.rotate(0*Math.PI/180);
                if (!this.ifm.links[3]) {
                    c.drawImage(arrow,0,0);
                }
                else {
                    c.drawImage(arrow2,0,0);  
                }
                c.translate(-205,-337);
                c.rotate(90*Math.PI/180);
                if (!this.ifm.links[1]) {
                    c.drawImage(arrow,0,0);
                }
                else {
                    c.drawImage(arrow2,0,0);  
                }
                c.translate(-185,-347);
                c.rotate(90*Math.PI/180);
                if (!this.ifm.links[4]) {
                    c.drawImage(arrow,0,0);
                }
                else {
                    c.drawImage(arrow2,0,0);  
                }
            };
        },
        draw_cover: function () {            
            var ctx=document.getElementById("card");
            var c=ctx.getContext("2d");
            ctx.width=ctx.width;
            ctx.height=ctx.height;
            var cover=document.getElementById("cover");
            c.drawImage(cover,0,0);
        },
        type_change: function () {
            if (this.ifm.type!="monster") {
                this.ifm.type2="tc";
                this.ifm.type3=null;
                this.ifm.type4=null;
            }
            else {
                this.ifm.type2="xg";
            }
        },
        card_rotate: function () {
            var card=document.getElementById("card");
            card.style.transition="all 0s";
            card.style.transform=this.rotate;
            if (this.r<90) {
                this.draw();
                card.style.boxShadow="50px 50px 200px #000";
            };
            if (this.r>90 && this.r<270) {
                this.draw_cover();
                card.style.boxShadow="-50px 50px 200px #000";
            };
            if (this.r>270) {
                this.draw();
                card.style.boxShadow="50px 50px 200px #000";
            }
        },
        cut_op: function (t) {
            if (t==1) {
                this.ls=true;
            }
            else {
                this.ls=false;
            }
            this.draw()
        },
        link: function (i) {
            var temp=this.ifm.links;
            var n=!temp[i];
            Vue.set(this.ifm.links,i,n);
            this.draw();
        },
        add_race: function () {
            this.diy_race=false;
            var len=this.new_race.length;
            if (this.new_race.split('')[len-1]!="族") {
                this.new_race+="族";
            }
            this.race_cn.push(this.new_race);
            this.race_jp.push(this.new_race);
            this.ifm.race=this.race_cn.length-1;
        }
    },
})


window.onload=function () {
    setInterval(function () {
        card.draw();
    },200);
}

var jcropApi;
$('#pic').Jcrop({
    allowSelect: true,
    baseClass: 'jcrop',
    aspectRatio: 1,
    boxWidth:400,
    onChange: function () {
        var w=jcropApi.getBounds()[0];
        var h=jcropApi.getBounds()[1];
        card.cut[0]=jcropApi.tellSelect().x;
        card.cut[1]=jcropApi.tellSelect().y;
        card.cut[2]=jcropApi.tellSelect().x2-jcropApi.tellSelect().x;
        card.cut[3]=jcropApi.tellSelect().y2-jcropApi.tellSelect().y;
        card.draw();
    }
}, function() {
  jcropApi = this;
});